<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="manifest" href="manifest.json">
    <link rel="apple-touch-icon" href="img/iphone2x.png">
    <link rel="apple-touch-icon" sizes="152x152" href="img/ipad2x.png">
    <link rel="apple-touch-icon" sizes="180x180" href="img/iphone3x.png">
    <link rel="apple-touch-icon" sizes="76x76" href="img/ipad.png">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="img/iphonex.png" sizes="1125x2436" rel="apple-touch-startup-image"/>
    <link href="img/iphone7p.png" sizes="1242x2208" rel="apple-touch-startup-image"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <title>提醒 App</title>
    <link href="https://unpkg.com/@ionic/core@4.6.0/css/ionic.bundle.css" rel="stylesheet">
    <style>
        :root {
            --ion-safe-area-top: 18px;
            --ion-safe-area-bottom: 22px;
        }
    </style>
</head>

<body>
<ion-app>
    <ion-nav root="nav-home" swipeGesture="true"></ion-nav>
</ion-app>
</body>
<script type="module" src="https://unpkg.com/@ionic/core@4.6.0/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/core@4.6.0/dist/ionic/ionic.js"></script>
<script src="chinDate.js"></script>
<script>
    /**
     * {
                'title': 'WIFI 密码',
                'description': '123321'
            }
     */
    techs = getLocalData();

    const dateInfor={
        yearInfor: new Date().format("yyyy-MM-dd"),
        nongli: getChineseDate(),
        weekInfor: getWeek()

    }

    function getLocalData() {
        let today=new Date().format("yyyy-MM-dd");
        let yesterday=getYesterday();
        let tomorrow=getTomorrow();
        if(localStorage.getItem(yesterday) != null){
            localStorage.removeItem(yesterday);
        }
        if(localStorage.getItem(tomorrow)==null){
            localStorage.setItem(tomorrow,JSON.stringify([]));
        }
        if (localStorage.getItem(today) == null) {
            localStorage.setItem(today,JSON.stringify([]));
            return [];
        }else {
            return JSON.parse(localStorage.getItem(today));
        }
    }

    function saveAllData() {
        let today=new Date().format("yyyy-MM-dd");
        localStorage.setItem(today, JSON.stringify(techs));
    }

    function saveDataTomorrow(data){
        let tomorrow=getTomorrow();
        let tomorrowTasks=JSON.parse(localStorage.getItem(tomorrow));
        tomorrowTasks.push(data);
        localStorage.setItem(tomorrow,JSON.stringify(tomorrowTasks));
    }

    customElements.define('nav-home', class NavHome extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>提醒</ion-title>

              <ion-buttons slot="primary">
                <ion-button>
                    <ion-icon name="add-circle-outline" style="color: #E63135;font-size: 23px;margin-right: 20px;margin-top: 4px;"></ion-icon>
                </ion-button>
              </ion-buttons>

            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen>
            <ion-card>
                <ion-card-header>
                    <ion-card-subtitle>日期</ion-card-subtitle>
                    <ion-card-title>${dateInfor.yearInfor} ${dateInfor.weekInfor}</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                     ${dateInfor.nongli}
                </ion-card-content>
            </ion-card>

            <ion-list>

            ${techs.map((tech, index) => `
                <ion-item-sliding>
                <ion-item  id="${index}">
                  <ion-icon slot="start" name="alarm" style="color: #E63135;"></ion-icon>
                  <ion-label>
                    <h3>${tech.title}</h3>
                  </ion-label>
                </ion-item>
                <ion-item-options>
            <ion-item-option color="danger" onClick="deletePassItem('${tech.title}')">
                <ion-icon slot="end" name="trash"></ion-icon>
                    完成
                </ion-item-option>
            </ion-item-options>
            </ion-item-sliding>
            `).join('\n')}


            </ion-list>
          </ion-content>
        `;
            const button = document.querySelector('ion-button');
            button.addEventListener('click', handleButtonClick);
        }
    });
    const nav = document.querySelector('ion-nav');


    function deletePassItem(titleName) {
        const items = Array.from(document.querySelectorAll('ion-item'));
        items.forEach((item, index) => {
            if (item.textContent.trim() == titleName) {
                const itemPWD = document.querySelector('ion-list').children[index];
                const list = document.querySelector('ion-list');
                list.removeChild(itemPWD);
                techs.splice(index, 1);
                saveAllData();
            }
        });
    }

    function handleButtonClick() {
        nav.push('nav-add');
    }

    customElements.define('nav-add', class NavDetail extends HTMLElement {
        async connectedCallback() {
            this.innerHTML = `
          <ion-header translucent>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button defaultHref="/" color="danger" text="返回"></ion-back-button>
              </ion-buttons>
              <ion-title>添加明日提醒</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen class="ion-padding">
            <form onsubmit="processForm(event)">

                <ion-text color="danger">
                    <h8>* 请简要的写下明日需要提醒内容</h8>
                </ion-text>
                <ion-list lines="full" class="ion-no-margin ion-no-padding">
                    <ion-item>
                        <ion-label position="stacked">提醒事件名称 <ion-text color="danger">*</ion-text></ion-label>
                        <ion-input required type="text" oninput="handlePassNameValue(event)"></ion-input>
                    </ion-item>

                 </ion-list>

                <div class="ion-padding">
                    <ion-button expand="block" type="submit" class="ion-no-margin" color="danger">创建提醒</ion-button>
                </div>
            </form>
            <ion-loading-controller></ion-loading-controller>
          </ion-content>
        `;
        }
    });

    let passName;
    async function processForm(event) {
        event.preventDefault();
        const loadingController = document.querySelector('ion-loading-controller');
        await  loadingController.componentOnReady();
        await loadingController.create({
            message: "正在存储",
            duration: 30000
        }).then(loading => loading.present());
        let data={
            'title': passName
        };
        saveDataTomorrow(data);
            await  loadingController.dismiss();
            // await alert("提醒已经存好");
            await presentAlert();
            nav.popToRoot();
    }

    function handlePassNameValue(event) {
        passName = event.target.value;
    }

    function presentAlert() {
        const alert = document.createElement('ion-alert');
        alert.message = '提醒已经存好，明天可见';
        alert.buttons = ['欧啦'];

        document.body.appendChild(alert);
        return alert.present();
    }
</script>
</html>
